<template>
	<view class="mypurchase">
		<view class="tabbox flex">
			<view class="tabitem" @click="changeTab(1)">
				<text>共享订单</text>
				<view class="active" v-show="type == 1"></view>
			</view>
			<view class="tabitem blue" @click="changeTab(2)">
				<text>售卖订单</text>
				<view class="active blue" v-show="type == 2"></view>
			</view>
		</view>
		<view class="tabmain">
			<u-tabs :list="statusArr" :current="current" lineWidth="40" lineColor="#AB87EF"
				:activeStyle="{color: '#8E8E8E',transform: 'scale(0.9)'}"
				:inactiveStyle="{color: '#8E8E8E',transform: 'scale(0.9)'}" @click="tabsclick($event)">
			</u-tabs>
			<view class="mypubbox" >
				<view class="goods-list">
					<view v-if="myOrder_List.length>0" class="goods-list-item" v-for="(item,i) in myOrder_List"
						:key="i">
						<view v-if="myOrder_showPop">
							<u-popup :show="myOrder_showPop" mode="center" @close="myOrder_close"
								:safeAreaInsetBottom="true" :safeAreaInsetTop="true" :overlay='true' :closeable="true"
								:bgColor="`#ffffff`" :round="'10px'" :closeOnClickOverlay="false">
								<view class="upopupbox" v-if="san">
									<text class="titlebox1">三日未收到对方回复，则无需密码直接申请）</text>
									<u-button class="buttonbox" type="success" text="立即完成"  :disabled="!isChecked"
										@click="myOrder_showPopqxClick(item)" customStyle="width: 400rpx" shape="circle"
										color="#ff0000">
									</u-button>
								</view>
								<view class="upopupbox" v-else>
									<view class="codebox">
										<text>交易码:</text>
										<input type="number"   :adjust-position="true" focus='true' placeholder="请输入对方交易码"
											v-model="myOrder_dealcode"  @blur="handleBlur"/>
									</view>
									<u-button class="buttonbox" type="success" text="立即完成"  :disabled="!isChecked"
										@click="myOrder_showPopqxClick(item)" customStyle="width: 400rpx" shape="circle"
										color="#ff0000">
									</u-button>
								</view>
							</u-popup>
						</view>
						<view class="order flex" @click="goodsClick(item)">
							<image class="image" mode="scaleToFill" :src="item.icon"></image>
							<view class="product-info">
								<view class="titles">{{formatProductName(item.goodsname)}}</view>
								<view class="tips">上架时间：{{item.date}}</view>
								<view class="tips">下单时间：{{item.deal_date}}</view>
								<view class="tips">交易密码：{{item.mydealcode}}</view>
								<!-- <view class="tips">交易对象：{{item.namebuy}}</view> -->
							</view>
							<view class="product-value">
								<view class="type">{{item.dealstate=='ondeal' ? '交易中' : '已完成'}}</view>
								<view class="flex">
									<text v-if="type==1">{{ item.money }}金币</text>
									<text v-if="type==2">{{ item.money }}元</text>
									<!-- <image class="label-image" src="/static/images/icon_coin.png" mode="widthFix"> -->
									</image>
								</view>
							</view>
						</view>
						<view class="bottom" v-if="item.dealstate=='ondeal'">
							<u-button type="primary" color="#5B7DC2" size="small" shape="circle"
								@click.stop="myOrder_buyqxClick(item)">取消交易</u-button>
							<u-button type="error" color="#7CD6A7" size="small" shape="circle"
								@click.stop="myOrder_buywcClick(item)">完成交易</u-button>
						</view>
					</view>
					<view v-if="myOrder_List.length==0" class="shoproempty">
						<shopro-empty :image="mediaUrl + '/media/image/empty_goods.png'" tipText="暂无~"></shopro-empty>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		formatProductName
	} from "../../utils/common";

	export default {
		name: "mypurchase",
		data() {
			return {
				isChecked: true,
				isActive: 1,
				type: 1,
				san: false,
				current: 0,
				statusArr: [{
					name: '交易中'
				}, {
					name: '已完成'
				}],
				mediaUrl: uni.$http.mediaUrl,
				userInfo: uni.getStorageSync('userInfo') || null,
				myOrder_List: [],
				dealstate: 'ondeal',
				myOrderTimer: null,

				myOrder_showPop: false,
				myOrder_dealcode: '',
				popUpTop: '50%' // 默认的对话框位置
			}
		},
		computed: {
			popUpStyle() {
				return {
					top: this.popUpTop
				}
			}
		},
		onLoad(options) {
			console.log(options)
			if (options.type) {
				this.type = options.type
			}
			this.dealstate = 'ondeal'
			self = this
			this.myOrder_OperateCenter();
		},
		onShow() {

			// console.log('onShow:',this.current)
		},
		methods: {
			formatProductName,
			handleFocus() {
				this.popUpTop = '10%'; // 输入框获得焦点时，弹框上移到距离顶部10%的位置
			},
			handleBlur() {
				this.popUpTop = '50%'; // 输入框失去焦点时，弹框返回初始位置
				this.isChecked = this.myOrder_dealcode.length > 0
				console.log(this.isChecked)
			},
			changeTab(flag) {
				this.type = flag
				this.page = 0
				this.myOrder_List = []
				this.myOrder_OperateCenter();
			},
			goodsClick(item) {
				uni.navigateTo({
					url: '/pages/home/goodsdetail?goodsid=' + item.goodsid
				})
			},
			myOrder_close() {
				self.myOrder_showPop = false
			},
			myOrder_buyqxClick(item) {
				this.myPub = item
				console.log(item)
				this.myOrder_dealcode = ''
				this.santian(item)
				this.myOrder_showPop = true
			},
			async myOrder_showPopqxClick(item) {
				this.isChecked = false
				item = this.myPub
				console.log(item)
				if (item.yourdealcode !== this.myOrder_dealcode) {

					uni.showToast({
						icon: 'error',
						title: '交易码错误'
					})
					return
				}
				const postmsg = {
					goodsid: item.goodsid,
					dealstate: 'buyqx',
				}
				const {
					data: res
				} = await uni.$http.post('updateMyPubLish/', postmsg)
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: '订单取消成功',
						duration: 1000
					})
					this.myOrder_dealcode = ''
					this.myOrder_showPop = false
					this.myOrder_OperateCenter()
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg,
						duration: 1000
					})
					this.myOrder_dealcode = ''
					this.myOrder_showPop = false
					this.myOrder_OperateCenter()
				}
			},

			santian(item) {
				// 判断交易是否超过了三天
				var day = parseInt((new Date() - new Date(item.deal_date)) / (1000 * 60 * 60 * 24));
				if (day > 3) {
					this.san = true
				}
			},
			tabsclick(item) {
				this.page = 0
				this.myOrder_List = []
				console.log(item.index)
				this.current = item.index
				switch (item.index) {
					case 0:
						this.dealstate = 'ondeal'
						break
					case 1:
						this.dealstate = 'dealcomplete'
						break
				};
				this.myOrder_OperateCenter();

			},
			myOrder_OperateCenter() {
				self.myOrder_updateList()
			},
			async myOrder_updateList() {
				self.myOrder_List = []
				const postmsg = {
					username: this.userInfo.username,
					dealstate: this.dealstate,
					type: this.type
				}
				// console.log('updateOrder--',postmsg)
				const {
					data: res
				} = await uni.$http.post('getMyOrder/', postmsg)
				if (res.code == 200) {
					uni.stopPullDownRefresh(); //上拉停止刷新
					for (let i = 0; i < res.data.length; i++) {
						var obj = {}
						obj.id = res.data[i].id
						obj.goodsid = res.data[i].goodsid
						obj.goodsname = res.data[i].goodsname
						obj.type = res.data[i].type
						obj.goodsdetail = res.data[i].goodsdetail
						obj.icon = (JSON.parse(res.data[i].imagelist))[0];
						obj.phonesale = res.data[i].phonesale
						obj.phonebuy = res.data[i].phonebuy
						// obj.namesale = res.orders[i].namesale
						// obj.namebuy = res.orders[i].namebuy
						obj.dealstate = res.data[i].dealstate
						obj.money = res.data[i].money
						obj.date = res.data[i].date
						obj.deal_date = res.data[i].deal_date
						obj.phonesale = res.data[i].phonesale
						obj.phonebuy = res.data[i].phonebuy
						obj.jubao_state = res.data[i].jubao_state
						obj.jubao_reson = res.data[i].jubao_reson
						// obj.namesale = res.orders[i].namesale
						// obj.namebuy = res.orders[i].namebuy
						let str = res.data[i].dealcode
						if (str != null) {
							obj.yourdealcode = str.substring(0, 4)
							obj.mydealcode = str.substring(4, str.length)
						}
						self.myOrder_List.push(obj)
					}
				}

			},

			myOrder_goodsClick(item) {
				uni.navigateTo({
					url: '/pages/home/goodsdetail?goodsid=' + item.goodsid
				})
			},

			myOrder_buywcClick(item) {
				console.log(item)

				self = this
				uni.showModal({
					title: '提示',
					content: '确定完成吗？',
					success: async function(res) {
						if (res.confirm) {
							const postmsg = {
								goodsid: item.goodsid,
								dealstate: 'buywc',
							}
							const {
								data: res
							} = await uni.$http.post('updateMyPubLish/', postmsg)
							if (res.code == 200) {
								uni.showToast({
									icon: 'success',
									title: '交易完成',
									duration: 1000
								})
								// if (item.type === 1) {
								// 	self. = 1
								// } else {
								// 	self.current2 = 1
								// }
								self.current=1
								self.dealstate = 'dealcomplete'
								self.myOrder_OperateCenter()
							} else {
								uni.showToast({
									icon: 'error',
									title: res.msg,
									duration: 1000
								})
								// if (this.isActive === 1) {
								// 	self.current = 0
								// } else {
								// 	self.current2 = 0
								// }
								self.myOrder_OperateCenter()
							}
						} else if (res.cancel) {
							console.log('用户点击完成');
						}
					}
				});
			}
		},
	}
</script>
</script>

<style lang="scss">
	.upopupbox {
			width: 600rpx;
			padding-bottom: 50rpx;
			margin-top: 0px;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
	
			.titlebox {
				font-size: 18px;
				display: flex;
				justify-content: center;
			}
	
			.codebox {
				margin-top: 40rpx;
				margin-bottom: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #545454;
	
				input {
					background-color: #lightgray;
					width: 160px;
					padding: 4px;
					margin-left: 10px;
				}
			}
	
			.buttonbox {
				margin-bottom: 10rpx;
				background: -webkit-linear-gradIEnt(left, #6C64D0, #8481C8) !important;
			}
		}
	
	
	.mypurchase {
		padding: 30rpx;
		.titlebox1 {
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			color: rgb(236, 22, 22);
			display: flex;
			justify-content: center;
			font-size: 24rpx;
			box-sizing: border-box;
		}

		.tabbox {
			.tabitem {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				position: relative;
				color: white;
				border-radius: 8rpx 0px 0px 8rpx;
				background: rgb(197, 183, 242);

				&.blue {
					border-radius: 0px 8rpx 8rpx 0px;
					background: rgb(113, 161, 255);
				}

				.active {
					position: absolute;
					left: 50%;
					transform: translate(-50%, -2rpx);
					width: 0;
					height: 0;
					border-left: 15rpx solid transparent;
					border-right: 15rpx solid transparent;
					border-top: 30rpx solid rgb(197, 183, 242);

					&.blue {
						border-top: 30rpx solid rgb(113, 161, 255);
						;
					}
				}
			}
		}

		.tabmain {
			margin: 50rpx 0;

			.u-tabs {
				width: 100%;
			}

			.u-tabs__wrapper__nav__item {
				color: #8E8E8E;
				font-size: 24rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				width: 280rpx;
				height: 72rpx !important;
				border: 1px solid #BEBEBE;

				&:first-child {
					border-radius: 40rpx 0 0 40rpx;
				}

				&.u-tabs__wrapper__nav__item-1 {
					border-radius: 0 40rpx 40rpx 0;
				}
			}
		}

		.mingcheng {
			font-size: 30rpx;
		}

		.tabsbox {
			// background-color: #0000ff;
			// height: 40px;
			// border: 1px;
			border-bottom: 4px solid #eaeaea;
		}

		
		.mypubbox {
			height: 40px;
			width: 100%;
			margin-top: 10px;
			// margin-bottom: 10px;

			.switchbox {
				display: flex;
				justify-content: start;
				width: 100%;
				padding: 0 10px;
			}

			.goods-list {
				width: 100%;
				margin-bottom: 30rpx;

				.goods-list-item {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;
					border: 1px solid rgb(190, 190, 190);
					border-radius: 12rpx;
					margin-bottom: 20rpx;

					.order {
						color: #A99CE6;
						padding: 20rpx;
						position: relative;

						.image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 24rpx;
						}

						.product-info {
							flex: 1;
							display: flex;
							flex-direction: column;
							margin-left: 20rpx;

							.titles {
								color: #8678CB;
								font-size: 28rpx;
								line-height: 2;
							}

							.taglist {
								display: flex;

								.tag {
									border-radius: 14rpx;
									background: rgb(247, 242, 255);
									padding: 6rpx 10rpx;
									color: #8978CB;
									font-size: 18rpx;
									margin-right: 10rpx;
								}
							}

							.tips {
								font-size: 22rpx;
								line-height: 2;
							}

							.distance {
								font-size: 24rpx;
								color: #A99CE6;

								.icon-location {
									width: 18rpx;
									height: 21rpx;
									margin-right: 5rpx;
								}
							}
						}

						.product-value {
							font-size: 24rpx;
							position: absolute;
							right: 0;
							top: 0;

							.flex {
								justify-content: flex-end;
								margin-right: 20rpx;

								.label-image {
									width: 38rpx;
									height: 38rpx;
									margin-left: 10rpx;
								}
							}

							&.blue {
								.type {
									background: #C5B7F2;
								}
							}

							.type {
								border-radius: 0px 12rpx 0px 44rpx;
								background: #C5B7F2;
								padding: 10rpx 30rpx 10rpx 40rpx;
								color: #fff;
								text-align: center;
							}

							>view {
								margin-bottom: 20rpx;

								text {
									color: #E36060;
									font-size: 36rpx;
									padding: 0 5rpx;
								}
							}
						}
					}

					.bottom {
						font-size: 12px;
						color: #fff;
						//text-align: center;
						display: flex;
						justify-content: flex-end;
						padding: 20rpx 0 20rpx 20rpx;
						border-top: 1px solid rgb(239, 239, 239);

						.mr0 {
							margin-right: 0;
						}

						.u-button {
							width: 30%;
							margin: 0 20rpx 0 0;
						}
					}

					.leftbox {
						display: flex;

						.imgbox {
							image {
								width: 120rpx;
								height: 120rpx;
								border-radius: 24rpx;
							}

						}

						.content {
							margin-left: 5px;
							font-size: 12px;

							color: #8678CB :nth-child(1) {
								font-weight: bold;
							}
						}
					}

					.rightbox {
						max-width: 80px;
						min-width: 80px;
						// background-color: #0000ff;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.top {
							font-weight: bold;
							font-size: 12px;
							color: #e34e4e;
						}

						.bottom {
							font-size: 12px;
							color: #fff;
							// background-color: #169bd5;
							border-radius: 5px;
							text-align: center;
							display: flex;
							flex-direction: column;

							:nth-child(1) {
								height: 26px;
							}

							:nth-child(2) {
								height: 26px;
								margin-top: 6px;
							}

							:nth-child(3) {
								height: 26px;
								margin-top: 6px;
							}
						}
					}
				}

				.shoproempty {
					// background-color: #ff0000;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

		}

		.myorderbox {
			height: 40px;
			width: 100%;
			margin-top: 20px;

			.switchbox {
				display: flex;
				justify-content: start;
				width: 100%;
				// background-color: #ff0000;
				padding: 0 10px;
			}

			.goods-list {
				width: 100%;

				.goods-list-item {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;
					border: 1px solid rgb(190, 190, 190);
					border-radius: 12rpx;

					.order {
						color: #A99CE6;
						padding: 20rpx;
						position: relative;

						.image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 24rpx;
						}

						.product-info {
							flex: 1;
							display: flex;
							flex-direction: column;
							margin-left: 20rpx;

							.titles {
								color: #8678CB;
								font-size: 28rpx;
								line-height: 2;
							}

							.taglist {
								display: flex;

								.tag {
									border-radius: 14rpx;
									background: rgb(247, 242, 255);
									padding: 6rpx 10rpx;
									color: #8978CB;
									font-size: 18rpx;
									margin-right: 10rpx;
								}
							}

							.tips {
								font-size: 22rpx;
								line-height: 2;
							}

							.distance {
								font-size: 24rpx;
								color: #A99CE6;

								.icon-location {
									width: 18rpx;
									height: 21rpx;
									margin-right: 5rpx;
								}
							}
						}

						.product-value {
							font-size: 24rpx;
							position: absolute;
							right: 0;
							top: 0;

							.flex {
								justify-content: flex-end;
								margin-right: 20rpx;

								.label-image {
									width: 38rpx;
									height: 38rpx;
									margin-left: 10rpx;
								}
							}

							&.green {
								.type {
									background-color: #7FD0AB;
								}

								text {
									color: #449F64
								}
							}

							.type {
								padding: 10rpx 30rpx 10rpx 40rpx;
								// background-color: #C5B7F2;
								// color: #fff;
								border-radius: 0 12rpx 0 44rpx;
								text-align: center;
							}

							>view {
								margin-bottom: 20rpx;

								text {
									color: #E36060;
									font-size: 36rpx;
									padding: 0 5rpx;
								}
							}
						}
					}

					.bottom {
						font-size: 12px;
						color: #fff;
						text-align: center;
						display: flex;
						padding: 20rpx;
						border-top: 1px solid rgb(239, 239, 239);

						.mr0 {
							margin-right: 0;
						}

						.u-button {
							width: 30%;
						}
					}

					.leftbox {
						display: flex;

						.imgbox {
							image {
								width: 120rpx;
								height: 120rpx;
								border-radius: 24rpx;
							}

						}

						.content {
							margin-left: 5px;
							font-size: 12px;

							color: #8678CB :nth-child(1) {
								font-weight: bold;
							}
						}
					}

					.rightbox {
						max-width: 80px;
						min-width: 80px;
						// background-color: #0000ff;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.top {
							font-weight: bold;
							font-size: 12px;
							color: #e34e4e;
						}

						.bottom {
							font-size: 12px;
							color: #fff;
							// background-color: #169bd5;
							border-radius: 5px;
							text-align: center;
							display: flex;
							flex-direction: column;

							:nth-child(1) {
								height: 26px;
							}

							:nth-child(2) {
								height: 26px;
								margin-top: 6px;
							}

							:nth-child(3) {
								height: 26px;
								margin-top: 6px;
							}
						}
					}
				}

				.shoproempty {
					// background-color: #ff0000;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			}
	}
</style>